@{
    ViewData["Title"] = "点检保养计划管理";
}

<!-- 直接引入所有必要的CSS和JS文件 -->
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<!-- 自定义样式 -->
<style>
    .maintenanceplan-container {
        padding: 15px;
        background-color: #fff;
        min-height: 100vh;
    }
    
    .search-card {
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        margin-bottom: 15px;
        padding: 15px;
    }
    
    .search-form .layui-form-item {
        margin-bottom: 10px;
    }
    
    .search-form .layui-form-label {
        width: 80px;
        padding: 9px 15px;
    }
    
    .search-form .layui-input-block {
        margin-left: 110px;
    }
    
    .search-form .layui-input, 
    .search-form .layui-select {
        height: 38px;
    }
    
    .data-card {
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
    }
    
    .action-bar {
        padding: 15px;
        border-bottom: 1px solid #e6e6e6;
        background: #fafafa;
    }
    
    .action-bar .layui-btn {
        margin-right: 10px;
    }
    
    .table-container {
        padding: 0;
    }
    
    .layui-table th {
        background: #f8f9fa;
        color: #333;
        font-weight: 600;
        border-bottom: 1px solid #e6e6e6;
        text-align: center;
    }
    
    .layui-table td {
        text-align: center;
    }
    
    .layui-table tbody tr:hover {
        background-color: #f0f7ff;
    }
    
    .status-loading, .status-empty {
        background: white;
        margin: 20px 0;
        padding: 40px;
        text-align: center;
        color: #666;
    }
    
    .status-loading i, .status-empty i {
        font-size: 48px;
        color: #ccc;
        margin-bottom: 15px;
    }
    
    .status-loading p, .status-empty p {
        font-size: 16px;
        margin: 0;
    }
    
    /* 状态标签样式 */
    .status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 2px;
        font-size: 12px;
        font-weight: normal;
    }
    
    .status-enabled {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .status-disabled {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    /* 操作按钮样式 */
    .action-btn {
        margin-right: 5px;
        font-size: 12px;
    }
    
    .layui-table-page {
        border-top: 1px solid #e6e6e6;
    }
</style>

<div class="maintenanceplan-container">
    <!-- 搜索区域 -->
    <div class="search-card">
        <form class="layui-form search-form" lay-filter="searchForm" id="searchForm">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">计划编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="projectCode" placeholder="请输入计划编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">计划名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="projectName" placeholder="请输入计划名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">计划类型</label>
                        <div class="layui-input-block">
                            <select name="projectType" lay-filter="projectType">
                                <option value="">请选择计划类型</option>
                                <option value="设备点检计划">设备点检计划</option>
                                <option value="设备保养计划">设备保养计划</option>
                                <option value="综合维护计划">综合维护计划</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <select name="whethertoEnable" lay-filter="whethertoEnable">
                                <option value="">全部状态</option>
                                <option value="启用">启用</option>
                                <option value="停用">停用</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0; text-align: right;">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="searchBtn">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 数据显示区域 -->
    <div class="data-card">
        <!-- 操作按钮区域 -->
        <div class="action-bar">
            <button class="layui-btn layui-btn-sm" id="addBtn">
                <i class="layui-icon layui-icon-add-circle"></i> 新增
            </button>
            <button class="layui-btn layui-btn-warm layui-btn-sm" id="refreshBtn">
                <i class="layui-icon layui-icon-refresh-3"></i> 刷新
            </button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" id="deleteBtn">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </button>
        </div>

        <!-- 表格容器 -->
        <div class="table-container">
            <!-- 加载状态 -->
            <div class="status-loading" id="loading" style="display: none;">
                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                <p>数据加载中，请稍候...</p>
            </div>

            <!-- 空数据状态 -->
            <div class="status-empty" id="empty" style="display: none;">
                <i class="layui-icon layui-icon-face-cry"></i>
                <p>暂无数据</p>
            </div>

            <!-- 表格区域 -->
            <table class="layui-hide" id="maintenanceplanTable" lay-filter="maintenanceplanTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列工具条模板 -->
<script type="text/html" id="barDemo">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-xs action-btn" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i> 编辑
        </a>
        <a class="layui-btn layui-btn-danger layui-btn-xs action-btn" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </a>
    </div>
</script>

<!-- 启用状态模板 -->
<script type="text/html" id="enableTpl">
    {{# if(d.whethertoEnable === '启用' || d.whethertoEnable === '是'){ }}
        <span class="status-badge status-enabled">启用</span>
    {{# } else if(d.whethertoEnable === '停用' || d.whethertoEnable === '否'){ }}
        <span class="status-badge status-disabled">停用</span>
    {{# } else { }}
        <span class="status-badge status-disabled">未设置</span>
    {{# } }}
</script>

<script>
layui.use(['table', 'form', 'layer', 'util'], function(){
    var table = layui.table,
        form = layui.form,
        layer = layui.layer,
        util = layui.util,
        $ = layui.$;
    
    // 表格渲染
    var tableIns = table.render({
        elem: '#maintenanceplanTable',
        url: '/ProductionSystem/Maintenanceplan/GetMaintenanceplans',
        method: 'GET',
        loading: true,
        page: true,
        limits: [10, 20, 50, 100],
        limit: 10,
        height: 'full-350',
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'ID', width: 80, align: 'center', fixed: 'left'},
            {field: 'projectCode', title: '计划编号', width: 150, align: 'center'},
            {field: 'projectName', title: '计划名称', width: 200, align: 'center'},
            {field: 'projectType', title: '计划类型', width: 120, align: 'center'},
            {field: 'whethertoEnable', title: '状态', width: 100, align: 'center', templet: '#enableTpl'},
            {field: 'projectContent', title: '项目内容', minWidth: 200, align: 'left'},
            {field: 'standard', title: '标准', minWidth: 200, align: 'left'},
            {title: '操作', toolbar: '#barDemo', width: 150, align: 'center', fixed: 'right'}
        ]],
        done: function(res, curr, count){
            if(res.code === 0){
                $('#loading').hide();
                if(count === 0){
                    $('#empty').show();
                } else {
                    $('#empty').hide();
                }
            } else {
                $('#loading').hide();
                layer.msg('数据加载失败：' + res.msg);
            }
        },
        request: {
            pageName: 'page',
            limitName: 'limit'
        },
        parseData: function(res){
            return {
                "code": res.code,
                "msg": res.msg,
                "count": res.count,
                "data": res.data
            };
        }
    });
    
    // 搜索
    form.on('submit(searchBtn)', function(data){
        var field = data.field;
        $('#loading').show();
        $('#empty').hide();
        
        table.reload('maintenanceplanTable', {
            where: {
                projectCode: field.projectCode,
                projectName: field.projectName,
                projectType: field.projectType,
                whethertoEnable: field.whethertoEnable
            },
            page: {
                curr: 1
            }
        });
        return false;
    });
    
    // 重置按钮
    $('#resetBtn').click(function(){
        $('#searchForm')[0].reset();
        form.render();
        $('#loading').show();
        $('#empty').hide();
        table.reload('maintenanceplanTable', {
            where: {},
            page: {
                curr: 1
            }
        });
    });
    
    // 新增按钮
    $('#addBtn').click(function(){
        layer.open({
            type: 2,
            title: '添加点检保养计划',
            content: '/ProductionSystem/Maintenanceplan/Edit',
            area: ['90%', '90%'],
            maxmin: true,
            end: function(){
                // 弹窗关闭时不做任何操作，由子页面控制刷新
            }
        });
    });
    
    // 删除按钮（批量删除）
    $('#deleteBtn').click(function(){
        var checkStatus = table.checkStatus('maintenanceplanTable');
        var data = checkStatus.data;
        
        if(data.length === 0){
            layer.msg('请选择要删除的数据');
            return;
        }
        
        layer.confirm('确定删除选中的 ' + data.length + ' 条记录吗？', function(index){
            var ids = data.map(function(item){
                return item.id;
            });
            
            // 这里应该调用批量删除接口，暂时逐个删除
            var deletePromises = ids.map(function(id){
                return new Promise(function(resolve, reject){
                    $.ajax({
                        url: '/ProductionSystem/Maintenanceplan/Delete/' + id,
                        type: 'POST',
                        success: function(res){
                            if(res.code === 0){
                                resolve();
                            } else {
                                reject(res.msg);
                            }
                        },
                        error: function(){
                            reject('删除失败');
                        }
                    });
                });
            });
            
            Promise.all(deletePromises).then(function(){
                layer.msg('删除成功');
                refreshTable();
                layer.close(index);
            }).catch(function(error){
                layer.msg('删除失败：' + error);
                layer.close(index);
            });
        });
    });
    
    // 监听工具条
    table.on('tool(maintenanceplanTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
            layer.confirm('确定删除这条记录吗？', function(index){
                $.ajax({
                    url: '/ProductionSystem/Maintenanceplan/Delete/' + data.id,
                    type: 'POST',
                    success: function(res){
                        if(res.code === 0){
                            layer.msg('删除成功');
                            refreshTable();
                        } else {
                            layer.msg('删除失败：' + res.msg);
                        }
                    },
                    error: function(){
                        layer.msg('删除失败');
                    }
                });
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.open({
                type: 2,
                title: '编辑点检保养计划',
                content: '/ProductionSystem/Maintenanceplan/Edit?id=' + data.id,
                area: ['90%', '90%'],
                maxmin: true,
                end: function(){
                    // 弹窗关闭时不做任何操作，由子页面控制刷新
                }
            });
        }
    });
    
    // 刷新按钮
    $('#refreshBtn').click(function(){
        refreshTable();
    });
    
    // 全局刷新表格方法 - 供子页面调用
    window.refreshTable = function() {
        $('#loading').show();
        $('#empty').hide();
        tableIns.reload();
    };
    
    // 全局加载表格数据方法 - 供子页面调用
    window.loadTableData = function() {
        refreshTable();
    };
    
    // 全局搜索数据方法 - 供子页面调用  
    window.searchData = function() {
        refreshTable();
    };
    
    // 初始显示加载状态
    $('#loading').show();
});
</script> 